<template>
	<section class="signup wallfff">
		<figure class="l_h0">
			<img class="w100" src="../../assets/Login/sutplogin2.png" />
		</figure>
		<ul class="w75 ">
			<li class="flexs mu30">
				<label for="name" class="label1"></label>
				<input id="name" v-model="name" class="flex1" type="text" placeholder="请输入姓名" />
			</li>
			<li class="flexs mu30">
				<label for="ids" class="label1"></label>
				<input id="ids" v-model="ids" class="flex1" type="text" placeholder="请输入身份证号码" />
			</li>
			<li class="flexs mu30">
				<label for="tel" class="label1"></label>
				<input id="tel" v-model="tel" class="flex1" type="tel" placeholder="请输入手机号" />
			</li>
			<li class="flexs mu30 rela">
				<label for="ver" class="label2"></label>
				<input id="ver" v-model="ver" class="flex1" type="number" placeholder="请输入验证码" />
				<button class="walld44 huefff rou10  vers" type="button" @click="vers" :disabled="isDs" :class="{dis: isDs}">{{ms}}</button>
			</li>
			<li class="flexs mu30">
				<label for="pwd1" class="label3"></label>
				<input id="pwd1" v-model="pwd1" class="flex1" type="password" placeholder="请输入密码" />
			</li>
			<li class="flexs mu30">
				<label for="pwd2" class="label4"></label>
				<input id="pwd2" v-model="pwd2" class="flex1" type="password" placeholder="请再次输入密码" />
			</li>
			<li class="flexs mu30">
				<label for="Intro" class="label5"></label>
				<input id="Intro" v-model="Intro" class="flex1" type="text" readonly placeholder="没有推荐人账户可不填" />
			</li>
		</ul>
		<button type="button" class="btnm" @click="signup">注册</button>

	</section>
</template>

<script>
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	import Qs from 'qs';
	import md5 from 'js-md5';
	export default {
		data() {
			return {
				name: "",
				ids: "",
				tel: "",
				ver: "",
				pwd1: "",
				pwd2: "",
				Intro: "",
				isDs: false,
				ms: "获取验证码",
				succe: false
			}
		},
		created() {
			let v = this;
			// 获取推荐人信息
			v.$http.get('/WorkMembers/V1.0/GetMembersByID', {
				params: {
					"MembersID": v.$route.query.MembersID
				}
			}).then((res) => {
				v.Intro = res.data.Return_Data.Members_Name || res.data.Return_Data.Members_Phone;
			})

		},
		methods: {
			vers: function() {
				let v = this;
				if(!/^1\d{10}$/.test(v.tel)) {
					Toast("请输入正确号码")
				} else {
					v.$http.get('/WorkMembers/V1.0/SendVer', {
						params: {
							"MembersID": v.tel,
							"Type": "phone",
							"UseType": "intro"
						}
					}).then((res) => {
						Toast(res.data.Return_Mess);

						v.isDs = true;
						let n = 10, // 倒计时10秒
							sto = setInterval(function() {
								v.ms = n + "s";
								n--;
								n === 0 && (clearInterval(sto), v.isDs = false, v.ms = "获取验证码")
							}, 1000);

					}).catch((err) => {
						Toast(err);
					});

				}
			},
			signup: function() {
				let v = this,
					name = /^[\u4e00-\u9fa5]{2,}$/,
					ids = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
				if(!name.test(v.name)) {
					Toast("请输入正确姓名")
				} else if(!ids.test(v.ids)) {
					Toast("请输入正确18位身份证号码")
				} else if(!/^1\d{10}$/.test(v.tel)) {
					Toast("请输入正确号码")
				} else if(!/^\d{6}$/.test(v.ver)) {
					Toast("请输入6位数验证码")
				} else if(!/^\w{6,12}$/.test(v.pwd1)) {
					Toast("请输入数字、字母及下划线组成的6-12位密码")
				} else if(v.pwd1 !== v.pwd2) {
					Toast("两次输入密码不相同")
				} else {
					Indicator.open({
						text: '请求中，请稍等'
					});

					v.$http.post("/WorkMembersIntro/V1.0/RegisterByQRCode", Qs.stringify({
						"Phone": v.tel,
						"Name": v.name,
						"IDCard": v.ids,
						"Ver": v.ver,
						"Pwd": md5(v.pwd2),
						"Intro": v.$route.query.MembersID

					})).then((res) => {
						Indicator.close();
						if(!res.data.Return_ID) {
							Toast(res.data.Return_Mess);
							sessionStorage.MembersID = res.data.Return_Data;
							v.$router.replace("/ownAll/own");
						} else {
							Toast(res.data.Return_Mess);
						}

					}).catch((err) => {
						Indicator.close();
						Toast("系统错误，请联系管理员");
					});
				}
			},
		},

	}
</script>

<style scoped>
	figure {
		height: 4.4rem;
	}
	
	.signup {
		padding-bottom: 0.6666666666rem;
	}
	
	.succ {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.succ {
		background: url(../../assets/Login/success.png) no-repeat;
		background-size: 100% 100%;
	}
	
	ul {
		margin: 0 auto;
	}
	
	label {
		height: 0.6666666666rem;
		width: 0.6666666666rem;
		align-self: center;
		margin-right: 0.5333333333rem;
	}
	
	.label1 {
		background: url(../../assets/Login/signtel.png) no-repeat;
		background-size: 100% 100%;
	}
	
	.label2 {
		background: url(../../assets/Login/signver.png) no-repeat;
		background-size: 100% 100%;
	}
	
	.label3,
	.label4 {
		background: url(../../assets/Login/signpwd.png) no-repeat;
		background-size: 100% 100%;
	}
	
	.label5 {
		background: url(../../assets/Login/signren.png) no-repeat;
		background-size: 100% 100%;
	}
	
	input {
		height: 1.3333333333rem;
		border-bottom: 2px solid #ccc;
		background: none;
		font-size: 0.3733333333rem;
	}
	
	.dis {
		background: #999999 !important;
	}
	
	.vers {
		position: absolute;
		right: 0;
		bottom: 20%;
		padding: 0.2rem 0.4rem;
	}
</style>